<template>
  <div id="app">
    <transition
      name="fade"
      mode="out-in"
    >
      <!-- 进行缓存 暂时没有区别需要缓存的页面 -->
      <keep-alive>
        <router-view v-if="!$route.meta.keepAlive" />
      </keep-alive>
    </transition>
    <!-- 因为路由刷新问题 选择系统需要重新刷新不能缓存 -->
    <transition>
      <router-view v-if="$route.meta.keepAlive" />
    </transition>
    <!-- <router-view v-slot="{ Component }">
      <transition>
        <component :is="Component" />
      </transition>
    </router-view>-->
    <!-- 组件数据缓存效果 -->
    <!-- <transition name="fade" mode="out-in">
      <keep-alive :include="cacheViews">
        <router-view />
      </keep-alive>
    </transition>-->
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>
<style lang="scss" scoped>
@import "~@/styles/variables.scss";

#app {
  min-width: 1080px;
  min-height: 900px;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.1s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 1;
}
.v-modal {
  background: transparent !important;
}
</style>
